<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw">
        <div class="left-area">
          <div class="box" v-if="id != -1" style="position: relative">
            <Spin :withIcon="true" v-if="loading"></Spin>
            <div class="flx-row-bw info-area">
              <div class="box-left-area">
                <div class="flx-row-s-c" style="margin-bottom: 5px">
                  <h2>{{ name }}</h2>
                  <i v-if="isTop == 1">推荐</i>
                </div>
                <span>{{ meaning }}</span>
              </div>
              <div class="box-right-area">
                <div class="flx-row-s-c">
                  <a
                    :href="item.href"
                    :class="{ 'mg-r-14': index < websiteList.length - 1 }"
                    v-for="(item, index) in websiteList"
                    :key="index"
                    >{{ item.name }}</a
                  >
                </div>
                <div class="flx-row-s-c" style="margin-top: 10px">
                  分享
                  <div class="share-icon share1"></div>
                  <div class="share-icon share2"></div>
                  <div class="share-icon share3"></div>
                </div>
              </div>
            </div>
            <div class="flx-row-s-s">
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">一口价</span>
                <span class="time">￥{{ price }}</span>
              </div>
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">注册商</span>
                <span class="time">{{ register }}</span>
              </div>
              <div class="flx-col-s-c w-p-100 time-area">
                <span class="name">到期时间</span>
                <span class="time">{{ deadline }}</span>
              </div>
            </div>
            <div class="submit-button" @click="showPayModalShow">立即预订</div>
          </div>
          <Empty-State
            style="background-color: #fff"
            v-else
            content="未找到此域名！"
          ></Empty-State>
          <div class="box bottom-box">
            <h3 class="title-h3" style="margin-left: 0">一口价购买须知</h3>
            <p v-for="(item, index) in tips" :key="index">{{ item }}</p>
          </div>
        </div>
        <div class="right-area">
          <h3 class="title-h3" style="margin: 20px 19px 13px">一口价推荐</h3>
          <table class="table-area">
            <tbody>
              <tr
                v-for="(item, index) in recommendList"
                :key="index"
                :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
              >
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin" title="">{{
                      item.name
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f">￥{{ item.money }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <div class="button button-size">购买</div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <pay-modal
      :show.sync="payModalShow"
      :sumPayable="sumPayable"
      :orderNo="orderNo"
      @start-pay="startPay"
    >
      <div class="flx-row-bw-c">
        <span class="f-16 c-d2"
          >域名预订：<span class="f-18 f-w-600 c-o">{{ name }}</span></span
        >
        <span class="f-16 c-d2"
          >预订保证金：<span class="f-18 f-w-600 c-r"
            >￥{{ bondMoney }}</span
          ></span
        >
        <span class="f-16 c-d2"
          >应付金额：<span class="f-18 f-w-600 c-gr"
            >￥{{ sumPayable }}</span
          ></span
        >
      </div>
    </pay-modal>
    <order-success-modal
      :show.sync="orderSuccessModalShow"
    ></order-success-modal>
    <to-login-modal :show.sync="loginModelShow"></to-login-modal>
  </div>
</template>

<script>
import { getDNDetail } from "@/api/data";
import { showtime } from "@/utils/format";
import { createBookingOrder, getOrderStatus } from "@/api/user";
const webScoketUrl =
  process.env.NODE_ENV === "development"
    ? config2.webScoketUrl.dev
    : config2.webScoketUrl.pro;
export default {
  name: "VipBookdetail",
  components: {
    payModal: () => import("_c/modal/payModal/payModal.vue"),
    toLoginModal: () => import("_c/modal/toLoginModal/toLoginModal.vue"),
    orderSuccessModal: () =>
      import("_c/modal/orderSuccessModal/orderSuccessModal.vue"),
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      breadCrumb: [
        { name: "一口价", to: "/buyoutprice" },
        { name: "一口价详情", to: "/buyoutdetail" },
      ],
      tips: [
        "1、一口价交易买家购买后，将不能违约退款，请谨慎操作。",
        "2、域名交易信息为卖家自行设置，请买家自行评估域名价值，平台不对此信息有效性进行任何保证。",
        "3、禁止用户自拍自卖，平台有权对此种情况下的违规用户做出相应处理。",
        "4、域名相关数据仅供参考，我们不保证数据100%准确。",
      ],
      websiteList: [
        {
          name: "SEO信息",
          href: "#",
        },
        {
          name: "whois",
          href: "#",
        },
        {
          name: "百度",
          href: "#",
        },
        {
          name: "爱站",
          href: "#",
        },
        {
          name: "谷歌",
          href: "#",
        },
      ],

      channelList: [],
      id: null,
      name: "asfasdf",
      meaning: "asdfsd",
      price: "500",
      register: "190",
      deadline: "1998-01-12",
      isTop: 1,
      leftTimeIntervel: null,

      recommendList: [
        {
          name: "baidu.com",
          money: 500,
        },
        {
          name: "baidu.com",
          money: 500,
        },
        {
          name: "baidu.com",
          money: 500,
        },
      ],

      // 交易信息
      bondMoney: "",
      sumPayable: "",
      leftMoney: "",
      orderNo: "",

      // 表单数据
      channelSelect: null,
      agree: false,
      // 弹框展示
      payModalShow: false,
      orderSuccessModalShow: false,
      loginModelShow: false,

      // 获取支付数据
      isStart: true,
      getTimeOutTimeOut: null,
    };
  },
  created() {
    // let id = this.$route.query.id;
    // if (id == null || id == "" || isNaN(id) || id <= 0) {
    //   this.id = -1;
    // } else {
    //   this.id = id;
    // }
    // this.getDn();
  },
  methods: {
    // 获取域名信息
    async getDn() {
      this.loading = true;
      let res = await getDNDetail(this.id);
      if (res.code == 200) {
        this.name = res.data.name;
        this.meaning = res.data.meaning;
        this.registrantTime = res.data.registrantTime;
        this.serverDeleteTime = res.data.serverDeleteTime;
        this.isTop = res.data.isTop;
        this.leftTimeIntervel = setInterval(() => {
          let time = showtime(res.data.serverDeleteTime);
          this.day = time.day;
          this.hour = time.hour;
          this.min = time.min;
          this.sec = time.sec;
        }, 1000);
      } else {
        this.id = -1;
      }
      this.loading = false;
    },
    // 显示选择付款弹窗
    async showPayModalShow() {
      if (!this.$token.get()) {
        this.loginModelShow = true;
        return;
      }
      if (this.channelSelect == null || this.channelSelect == "") {
        this.$Message.warning("请选择预订通道");
        return;
      }
      if (!this.agree) {
        this.$Message.warning(
          "请同意《抢注预订服务协议》并已阅读《抢注预订须知》"
        );
        return;
      }
      this.formLoading = true;
      let data = {
        channelId: this.channelSelect,
        domainBookingId: this.id,
      };
      let res = await createBookingOrder(data);
      if (res.code == 200) {
        this.payModalShow = true;
        this.bondMoney = res.data.bond;
        this.sumPayable = res.data.amount;
        this.leftMoney = res.data.balance;
        this.$store.commit("setBalance", res.data.balance);
        this.orderNo = res.data.orderNo;
      }
      this.formLoading = false;
    },
    // 开始付款
    startPay() {
      if (this.isStart) {
        this.isStart = false;
        this.startSocket();
      }
    },
    // 获取订单状态
    // async getOrderStatus() {
    //   let res = await getOrderStatus(this.orderNo);
    //   if(res.code == 200) {
    //     console.log(res.data);
    //     this.payModalShow = false
    //     this.orderSuccessModalShow = true
    //   } else {
    //     this.getTimeOutTimeOut = setTimeout(() => {
    //       this.getOrderStatus();
    //     }, 2000);
    //   }
    // }
    // webScoket发送消息
    sendMessage(txt) {
      this.webSocket.send(txt);
    },
    // webScoket异常重连
    resetConnect() {
      this.connectCount = this.connectCount || 0;
      if (!this.webSocketInterval) {
        // console.log("开始webSocket重连");
        this.webSocketResetInterval = setInterval(() => {
          // console.log(this.connectCount);
          this.connectCount += 1;
          if (this.connectCount <= 5) {
            this.startSocket();
            this.webSocketResetInterval &&
              clearInterval(this.webSocketResetInterval);
          }
        }, 1000);
      }
    },
    // 开启webScoket
    startSocket() {
      this.messageTotal = 0;
      this.webSocket = new WebSocket(
        `${webScoketUrl}/web/webSocket/pay/${this.orderNo}/${this.$token.get()}`
      );
      // 接收消息事件
      this.webSocket.onmessage = (e) => {
        // console.log(e);
        if (e.data === "open:suc") {
          this.sendMessage("start");
          this.heartInterval = setInterval(() => {
            if (this.messageTotal === 10) {
              this.sendMessage("heart");
              this.messageTotal = 0;
            }
            this.messageTotal += 1;
          }, 1000);
        }
        if (e.data.indexOf("msg:") != -1) {
          let message = e.data.split("msg:")[1];
          this.messageTotal = 0;
          let info = JSON.parse(message);
          if (info != null) {
            if (info.result == "true") {
              this.sendMessage("stop");
              this.payModalShow = false;
              this.orderSuccessModalShow = true;
              this.heartInterval && clearInterval(this.heartInterval);
            }
          }
        }
        if (e.data.indexOf("rec:stop") != -1) {
          this.webSocket.close();
        }
      };
      // 关闭事件
      // this.webSocket.onclose = () => {
      //   this.resetConnect();
      // };
      // 连接失败事件
      this.webSocket.onerror = () => {
        this.resetConnect();
      };
    },
  },
  // beforeDestroy() {
  //   clearInterval(this.leftTimeIntervel);
  //   // clearTimeout(this.getTimeOutTimeOut);
  //   if(!this.isStart) {
  //     if(this.webSocket) this.sendMessage('stop')
  //     this.heartInterval && clearInterval(this.heartInterval);
  //     this.webSocketResetInterval && clearInterval(this.webSocketResetInterval);
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    width: 750px;
    .box {
      background: #ffffff;
      border: 1px solid #eaeaea;

      .info-area {
        padding: 20px 30px;

        .box-left-area {
          h2 {
            font-size: 20px;
            color: #3d3d3d;
            word-break: break-all;
          }
          i {
            display: inline-block;
            @include size(40px, 20px);
            margin-left: 20px;
            background-color: #f9521f;
            border-radius: 4px;
            color: #fff;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            font-style: normal;
            flex-shrink: 0;
          }
          span {
            color: rgba($color: #3d3d3d, $alpha: 0.8);
            font-size: 14px;
          }
        }
        .box-right-area {
          color: #3d3d3d;
          flex-shrink: 0;
          margin-left: 15px;
          a {
            font-size: 14px;
            @include h-c(null, null, #3d3d3d, #f9521f);
            flex-shrink: 0;
            line-height: 30px;
          }
          .mg-r-14 {
            margin-right: 14px;
          }
          .share-icon {
            margin-left: 10px;
            @include size(20px);
            @include bg-setting;
          }
          .share1 {
            background-image: url("~@/assets/images/share1@2x.png");
          }
          .share2 {
            background-image: url("~@/assets/images/share2@2x.png");
          }
          .share3 {
            background-image: url("~@/assets/images/share3@2x.png");
          }
        }
      }

      .time-area {
        padding: 15px;
        background-color: #feede8;
        height: 84px;
        .name {
          font-style: 14px;
          font-weight: 600;
          margin-bottom: 6px;
          color: #3d3d3d;
          flex-shrink: 0;
        }
        .time {
          color: #f9521f;
          font-size: 18px;
          flex-shrink: 0;
        }
      }

      .submit-button {
        @include size(140px, 40px);
        @include btn-s(null, 40px, 5px);
        @include h-c(#f9521f, rgba(249, 82, 31, 0.8), #fff);
        margin: 36px auto 30px;
      }
    }
    .bottom-box {
      margin-top: 15px;
      padding: 20px 19px;

      p {
        font-size: 14px;
        color: rgba($color: #3d3d3d, $alpha: 0.8);
        line-height: 1.5;
        word-break: break-all;
        margin-top: 18px;
        transition: color 0.3s;
        &:hover {
          color: #f9521f;
        }
      }
    }
  }

  .right-area {
    width: 435px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    .button-size {
      @include size(60px, 26px);
      font-size: 12px;
      line-height: 26px;
    }

    .money {
      font-size: 16px;
      color: #f9521f;
      font-weight: 600;
      &::before {
        content: "￥";
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}
</style>
